<template>
    <div class="item">
        <div class="item-header">
            <p>报警列表</p>
            <img src="../img/title_bor.png" alt="">
        </div>
        <div class="item-chart">
            <transition-group appear tag="ul" id="alarmList" class="item-chart-list">
                <li v-for="(item,i) in data"  class="item-chart-list-item" :key="i" >
                    <p>{{item.callDate}} {{['心率', '血压', 'SOS', '围栏'][item.type]}}</p>
                    <p v-if="[0, 1].indexOf(item.type) > -1">报警值：{{item.type == 1 ? `${item.alarmValue}/${item.alarmValue2}mmHg` : `${item.alarmValue}bpm`}}</p>
                    <p v-else>位置：{{item.site}} {{item.siteDef}}</p>
                </li>
            </transition-group>
        </div>
    </div>
</template>

<script>
    import Mock from 'mockjs';
    import $ from "jquery";
    export default {
        data() {
            return{
                data: [],
                time: null
            }
        },
        mounted() {
            this.data = Mock.mock({
                'list|5': [{
                    'type|0-3': 3,
                    name: '@cname',
                    site: '@county(true)',
                    siteDef: '@csentence()',
                    callDate: '@datetime()',
                    alarmValue: '@natural(60, 100)',
                    alarmValue2: '@natural(100, 120)',
                    reg: '@region',
                }]
            }).list;
            this.$nextTick(() => {
                $('.item-chart-list').animate({scrollTop: $(".item-chart-list").prop("scrollHeight") }, 5000)
                setTimeout(() => {
                    this.dataTime();
                }, 5000)
            })
        },
        methods: {
            dataTime() {
                this.time = setInterval(() => {
                    this.data.push(
                        Mock.mock({
                            'type|0-3': 3,
                            name: '@cname',
                            site: '@county(true)',
                            siteDef: '@csentence()',
                            callDate: '@datetime()',
                            alarmValue: '@natural(60, 100)',
                            alarmValue2: '@natural(100, 120)',
                            reg: '@region',
                        })
                    );
                    this.$nextTick(() => {
                        $('.item-chart-list').animate({scrollTop: `+=${$(".item-chart-list-item").height() + 20}` }, 1000)
                    })
                }, 3000)
            }
        },
        destroyed() {
            clearInterval(this.time);
            this.time = null;
        }
    }
</script>

<style scoped lang="less">
    @import "index";
    .v-enter,.v-leave-to {
        opacity: 0;
        transform: translateY(100px);
    }

    .v-enter-active,.v-leave-active {
        transition: all 1s ease;
    }

    .v-move {
        transition: all 1s ease;
    }

    .v-leave-active {
        position: absolute;
    }
    .item-chart-list{
        overflow: auto;
        margin:15px;
        flex: 1;
        max-height: 20vh;
        list-style: none;
        padding: 0 0 0 15px;
        pointer-events: none;
        &::-webkit-scrollbar {
            display: none; /* Chrome Safari */
        }
        &-item{
            p{
                margin: 0;
                padding: 0;
                color: #a5acb6;
                font-size: 12px;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                width: 300px;
            }
            padding: 5px;
            position: relative;
            &:before{
                content: "";
                display: block;
                position: absolute;
                left: -25px;
                top: 0;
                bottom: 0;
                margin: auto;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                background-color: #1890ff;
                transform: scale(.15);
                box-shadow: #389dfd 1px 1px 10px;
            }
            &:nth-child(odd) {
                background-color: rgba(25, 57, 99, 0.16);
            }
        }
    }
</style>
